import { Modal, Radio, Form, Input ,Button } from 'antd';
import React from 'react';

function Modal2(props) {
    // 编辑模态框默认隐藏
    const [visible, setVisible] = React.useState(false);
    // 点击编辑模态框出现
    const showModal = () => {
        setVisible(true);
    };
    // 点击确认模态框消失
    const handleOk = () => {
        setVisible(false);
    };

    //   点击取消模态框消失
    const handleCancel = () => {
        setVisible(false);
    };
    // 单选框
    const [value, setValue] = React.useState(1);

    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    return (
        <>
            <Button type='link' onClick={showModal}>
                编辑
            </Button>
            {/* 第一个模态框 */}
            <Modal
                height="100"
                title="编辑"
                visible={visible}
                onCancel={handleCancel}
                footer={[
                    <Button onClick={handleOk}>确认</Button>,
                    <Button onClick={handleCancel}>取消</Button>
                ]}
            >
                <div>
                    <p>原因：</p>
                    <Form.Item>
                        <Input value={props.name.cancelReason} />
                    </Form.Item>
                    <p>状态: </p>
                    <Radio.Group onChange={onChange} value={props.name.orderState == '启用' ? 1 : 2}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>禁用</Radio>
                    </Radio.Group>
                </div>
            </Modal>
        </>
    )
}
export default Modal2;